import React, { useContext } from 'react'
import { MyContext } from "../../App";

import Header from '../../components/Header/Header'
import { Button, Space, Avatar } from 'antd-mobile'
import {actions} from '../../reducer/app'


const Mine = ()=>{
  const {state,dispatch} = useContext(MyContext)

    return (
      <div className='mine'>
        <Header back title="我的"></Header>

        <div className='mine_content'>
          <div className='mine_content_left'></div>
          <Space block direction='vertical'>
            <Avatar
              src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F26%2F20211126105820_273b6.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659359450&t=fd437f8371d002202fc0e098cd84979a' />
          </Space>
          <div className='mine_content_right'>
            <h2>昵称：{state.userInfo.nickname}</h2>
            <p>账户名：{state.userInfo.phone}</p>
          </div>
        </div>
        <div className='mine_footer'>

        </div>

        <Button block color='danger' size='large'
          onClick={() => {
            dispatch(actions.changeUserInfo({}));
          }}
        >
          退出登录
        </Button>
      </div>
    )
  }
  export default Mine;

